<template>
  <view class="cate-container">
    <!-- 1. 顶部导航栏 -->
    <view class="nav-bar customHeader" @click="navSearch">
      <view class="nav-left">
        <image
          class="nav-icon"
          src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756021517435.png"
        />
        <text class="nav-title">手机游戏</text>
      </view>
      <image
        class="nav-search-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756021522290.png"
      />
    </view>

    <!-- 2. 标签分类 -->
    <view class="tags-section">
      <text
        class="tag-item"
        v-for="tag in tags"
        :key="tag"
        @click="navToUrl(tag)"
        >{{ tag }}</text
      >
    </view>

    <!-- 3. 海外新游 -->
    <view class="game-section">
      <view class="section-header">
        <text class="section-title">海外新游</text>
      </view>
      <scroll-view class="game-scroll-list" scroll-x="true">
        <view
          class="game-card"
          v-for="(game, index) in overseasGames"
          :key="index"
          @click="handleToHome(game)"
        >
          <image class="game-card-icon" :src="game.icon"></image>
          <text class="game-card-name">{{ game.name }}</text>
          <text class="game-card-size">{{ game.size }}</text>
          <button
            class="subscribe-button"
            v-if="!game.is_subscribe"
            @click.stop="handleSubscribe(game)"
          >
            订阅
          </button>
          <button
            class="subscribe-button"
            v-else
            @click.stop="handleSubscribe(game)"
          >
            取消订阅
          </button>
        </view>
      </scroll-view>
    </view>

    <!-- 4. 新游周荐 -->
    <view class="game-section">
      <view class="section-header">
        <text class="section-title">好游周荐</text>
      </view>
      <scroll-view class="game-scroll-list" scroll-x="true">
        <view
          class="game-card"
          v-for="(game, index) in weeklyGames"
          :key="index"
          @click="handleToHome(game)"
        >
          <image class="game-card-icon" :src="game.icon"></image>
          <text class="game-card-name">{{ game.name }}</text>
          <text class="game-card-size">{{ game.size }}</text>
          <button
            class="subscribe-button"
            v-if="!game.is_subscribe"
            @click.stop="handleSubscribe(game)"
          >
            订阅
          </button>
          <button
            class="subscribe-button"
            v-else
            @click.stop="handleSubscribe(game)"
          >
            取消订阅
          </button>
        </view>
      </scroll-view>
    </view>

    <!-- 5. 广告图 -->
    <view class="ad-section">
      <scroll-view class="ad-scroll-list" scroll-x="true">
        <image
          class="ad-banner-item"
          v-for="(banner, index) in adBanners"
          :key="index"
          :src="banner.src"
          mode="aspectFill"
        ></image>
      </scroll-view>
    </view>

    <!-- 6. 11区手游推荐 -->
    <view class="game-section">
      <view class="section-header">
        <text class="section-title">星官首推</text>
      </view>
      <view class="recommend-list">
        <view
          class="recommend-card"
          v-for="(game, index) in recommendedGames"
          :key="index"
          @click="handleToHome(game)"
        >
          <image class="recommend-card-icon" :src="game.icon"></image>
          <text class="game-card-name">{{ game.name }}</text>
        </view>
      </view>
    </view>

    <!-- 底部自定义tabbar -->
    <custom-tabbar
      :currentIndex="currentTabIndex"
      @tabChange="handleTabChange"
    />
  </view>
</template>

<script setup>
import CustomTabbar from "@/components/tabbar.vue";
import { showToast, tabbarTo } from "@/utils/helper";
import { ref } from "vue";

const tags = ref([
  "原神",
  "王者荣耀",
  "崩坏·星穹轨道",
  "和平精英",
  "绝区零",
  "诛仙",
  "糖豆人",
]);
const overseasGames = ref([
  {
    name: "天命西游",
    size: "98.8M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480415.jpeg",
    is_subscribe: false,
    url: "http://www.tianmingxy.com/",
  },
  {
    name: "魔女的侵袭",
    size: "13.5M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480413.png",
    is_subscribe: false,
    url: "https://monvdeqinxi.com/",
  },
  {
    name: "蜀山传",
    size: "25.3M",
    icon: "http://ss.onwind.cn/images/logo.png",
    is_subscribe: false,
    url: "http://ss.onwind.cn/",
  },
  {
    name: "大国战",
    size: "28.9M",
    icon: "https://fc4tn.baidu.com/it/u=2654844739,219180249&fm=202",
    is_subscribe: false,
    url: "http://hot.yuekenet.com/go-dgz-0-1-586-567.html",
  },
  {
    name: "峭壁奔跑",
    size: "14.1M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480393.png",
    is_subscribe: false,
    url: "https://3g.7723.cn/apps/28640",
  },
  {
    name: "僵尸之王",
    size: "31.1M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480392.png",
    is_subscribe: false,
    url: "https://3g.7723.cn/apps/10192",
  },
  {
    name: "未来纪元",
    size: "28.9M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480410.png",
    is_subscribe: false,
    url: "http://fw.game-beans.com/m/index.html",
  },
]);
const weeklyGames = ref([
  {
    name: "QQ游戏",
    size: "37.4M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480390.jpeg",
    is_subscribe: false,
    url: "https://qqgame.qq.com/",
  },
  {
    name: "欢乐斗地主",
    size: "28.9M",
    icon: "https://game.gtimg.cn/images/hlddz/m/m202112/logo.png",
    is_subscribe: false,
    url: "https://hlddz.qq.com/m/",
  },
  {
    name: "梦幻西游",
    size: "28.9M",
    icon: "https://webinput.nie.netease.com/img/my/icon.png",
    is_subscribe: false,
    url: "https://my.163.com/m/fab/cs16/",
  },
  {
    name: "三国志曹操传",
    size: "98.8M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480397.png",
    is_subscribe: false,
    url: "http://ccz.cmge.com/",
  },
  {
    name: "深空之眼",
    size: "63.1M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480408.webp",
    is_subscribe: false,
    url: "https://www.ys4fun.com/",
  },
  {
    name: "游戏守护者",
    size: "40.1M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480401.webp",
    is_subscribe: false,
    url: "https://app.3dmgame.com/zt/14220_game/",
  },
  {
    name: "火狐传",
    size: "28.9M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480395.jpeg",
    is_subscribe: false,
    url: "https://m.xfdown.com/k/ghostbride",
  },
]);
const adBanners = ref([
  {
    src: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756087335024.png",
  },
  {
    src: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756087335025.jpeg",
  },
  {
    src: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756087335014.jpeg",
  },
  {
    src: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756087335022.webp",
  },
]);
const recommendedGames = ref([
{
    name: "天命西游",
    size: "98.8M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480415.jpeg",
    is_subscribe: false,
    url: "http://www.tianmingxy.com/",
  },
  {
    name: "魔女的侵袭",
    size: "13.5M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480413.png",
    is_subscribe: false,
    url: "https://monvdeqinxi.com/",
  },
  {
    name: "蜀山传",
    size: "25.3M",
    icon: "http://ss.onwind.cn/images/logo.png",
    is_subscribe: false,
    url: "http://ss.onwind.cn/",
  },
  {
    name: "大国战",
    size: "28.9M",
    icon: "https://fc4tn.baidu.com/it/u=2654844739,219180249&fm=202",
    is_subscribe: false,
    url: "http://hot.yuekenet.com/go-dgz-0-1-586-567.html",
  },
  {
    name: "峭壁奔跑",
    size: "14.1M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480393.png",
    is_subscribe: false,
    url: "https://3g.7723.cn/apps/28640",
  },
  {
    name: "僵尸之王",
    size: "31.1M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480392.png",
    is_subscribe: false,
    url: "https://3g.7723.cn/apps/10192",
  },
  {
    name: "未来纪元",
    size: "28.9M",
    icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480410.png",
    is_subscribe: false,
    url: "http://fw.game-beans.com/m/index.html",
  },
]);

const currentTabIndex = ref(1);
const handleTabChange = (index) => {
  currentTabIndex.value = index;
  tabbarTo(index);
};
const handleSubscribe = (item) => {
  item.is_subscribe = !item.is_subscribe;
  showToast(item.is_subscribe ? "已订阅" : "已取消订阅");
};
const navSearch = () => {
  uni.navigateTo({
    url: "/pages/search/index",
  });
};

const handleToHome = (game) => {
  uni.navigateTo({
    url: "/pages/search/webView?url=" + game.url,
  });
};
const navToUrl = (tag) => {
  uni.navigateTo({
    url: "/pages/search/searchGame?searchQuery=" + tag,
  });
};
</script>

<style scoped>
.cate-container {
  background-color: #ffffff;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #4caf50;
  /* Green background */
  height: 60rpx;
}

.nav-left {
  display: flex;
  align-items: center;
  color: white;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #eee;
}

.nav-search-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 标签分类 */
.tags-section {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 20rpx solid #f5f5f5;
}

.tag-item {
  background-color: #f0f0f0;
  color: #666;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

/* 游戏分区公共样式 */
.game-section {
  padding: 30rpx 0 30rpx 30rpx;
  border-bottom: 20rpx solid #f5f5f5;
}

.section-header {
  margin-bottom: 26rpx;
  text-align: center;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}
.game-scroll-list {
  white-space: nowrap;
}

.game-card,
.recommend-card {
  display: inline-block;
  vertical-align: top;
  margin-right: 20rpx;
  text-align: center;
  width: 150rpx;
}

/* 游戏卡片 */
.game-card-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
}

.game-card-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card-size {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.subscribe-button {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  color: #ff8c00;
  border: 1px solid #ff8c00;
  background-color: #fff;
  border-radius: 25rpx;
  padding: 0;
}

/* 广告图 */
.ad-section {
  padding: 20rpx 0 20rpx 30rpx;
  border-bottom: 20rpx solid #f5f5f5;
}

.ad-scroll-list {
  white-space: nowrap;
}

.ad-banner-item {
  display: inline-block;
  width: 450rpx;
  /* 调整宽度以适应长方形 */
  height: 200rpx;
  border-radius: 15rpx;
  margin-right: 20rpx;
}

/* 推荐卡片 */
.recommend-card-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 30rpx;
}

/* 底部占位 */
.tabbar-placeholder {
  height: 100rpx;
}
</style>
